<template>
  <!-- 复制移动个人树弹窗 -->
  <div class="pagevue">
    <el-dialog title="" v-model="dialogRestore" width="550px" :close-on-click-modal="false" @close="cloeRestoreDialog">
      <template #header>
        <div>
          <svg-icon icon-class="file-close" style="margin-right: 5px"></svg-icon>
          <span>选择文件位置</span>
        </div>
      </template>

      <div class="treeElClass">
        <el-tree ref="treeRestore" :data="treeRestoreList" :props="defaultProps" node-key="id" class="filter-tree"
          :lazy="true" :load="loadNode" :highlight-current="true" :default-expanded-keys="expandedKeys"
          :expand-on-click-node="false" @node-click="treeRestoreNodeClick">
          <template #default="{ node, data }">
            <span @dblclick="treeRestoreDblclick(node, data)">
              <!-- <svg-icon :icon-class="node.expanded ? 'file-open' : 'file-close'"></svg-icon>
            <span>{{ node.label }}</span> -->
              <svg-icon :icon-class="selectSvgIcons(data)"></svg-icon>
              <span class="realName_class">{{ data.realName }}{{ data.suffix ? '.' + data.suffix : '' }}</span>
            </span>
          </template>
        </el-tree>
      </div>

      <div class="file_path">
        <el-divider direction="vertical" class="label_divider"></el-divider>
        <span> 路径：</span>
        <div class="file_path_class">{{ treeRestorePathObj.path.replace(/\//g, '\\') }}</div>
        <el-button text type="primary" class="btn_box" @click="selectRootDirectory">选择根目录</el-button>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="SureDialogRestoreClick">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { apiTreeFileSelectTree } from '@/api/teamKnowdge/teamFileApi'
const { proxy } = getCurrentInstance() as any
const dialogRestore = ref(false)
const route = useRoute()
const defaultProps = reactive({
  //树
  children: 'children',
  label: 'realName',
  isLeaf: 'leaf'
})
const treeRestoreList = ref([])
const expandedKeys = ref([0])
const treeRestorePathObj = ref({
  path: ''
})
const treeRestorePathObj_init = ref({
  path: ''
}) //保存初始化的树路径
const emit: any = defineEmits(['sureClick'])

const openDialog = () => {
  dialogRestore.value = true
  getTreeList()
}

const selectSvgIcons = (v) => {
  return proxy.$yuUtils.selectSvgIcon(v)
}

// 获取树请求
const getTreeList = async () => {
  let res
  res = await apiTreeFileSelectTree({ sort: ['sort Asc', 'type Desc', 'create_time Desc'], parentId: route.query.headNodeId, teamId: route.query.teamId })
  console.log(res, '获取树请求')

  treeRestorePathObj.value = res.data
  treeRestorePathObj_init.value = res.data
  if (!res.data.path) {
    res.data.path = '/' + res.data.realName
  }
  treeRestoreList.value = res.data.children
  dialogRestore.value = true
}

// 获取树
const loadNode = async (node, resolve) => {
  let res
  if (node.level == 0) {
    return resolve(node.data)
  }

  res = await apiTreeFileSelectTree({
    parentId: node.data.id,
    sort: ['sort Asc', 'type Desc', 'create_time Desc'],
    nodeType: 'folder'
  })

  res.data.path = '/' + res.data.realName
  let childrenArr = res.data.children
  return resolve(childrenArr)
}

// 点击树节点
const treeRestoreNodeClick = async (data, node) => {
  treeRestorePathObj.value = data
}

//选择根目录
const selectRootDirectory = () => {
  treeRestorePathObj.value = treeRestorePathObj_init.value
}

// 关闭对话框
const cloeRestoreDialog = () => {
  dialogRestore.value = false
  treeRestorePathObj.value = { path: '' }
}

// 双击
const treeRestoreDblclick = (node, data) => {
  treeRestorePathObj.value = data
  SureDialogRestoreClick()
}

// 确定按钮
const SureDialogRestoreClick = () => {
  emit('sureClick', treeRestorePathObj.value)
  cloeRestoreDialog()
}

defineExpose({
  //调用组件需要导出 v-model的变量
  openDialog
})
</script>

<style lang="scss" scoped>
:deep(.el-dialog__body) {
  padding: 10px 20px !important;
}

.btn_box {
  &:hover {
    background: none !important;
  }
}

.treeElClass {
  height: 300px;
  //   max-height: 30vh;
  overflow-y: auto;
  border: 1px solid #eee;
  margin-bottom: 15px;
}

.file_path {
  display: flex;
  align-items: center;

  .file_path_class {
    flex: 1;
    border-bottom: 1px solid #eee;
    margin-right: 6px;
  }
}

.label_divider {
  width: 3px;
  background-color: #409eff;
  margin: 0 4px;
  border-radius: 2px;
}
</style>
